<template>
	<view class="container">
		<view class="common-header-xian"></view>
		<form @submit="saveData" report-submit="true">
			<view class="address-cont-title b-f b-b">
				<view class="list address-box dis-flex b-b">
					<view class="left-name"><text class="f-30">收货人</text></view>
					<view class="right-cont flex-box"><input name="name" placeholder="请输入收货人姓名" v-model="name" /></view>
				</view>
				<view class="list address-box dis-flex">
					<view class="left-name"><text class="f-30">手机号</text></view>
					<view class="right-cont flex-box"><input name="phone" placeholder="请输入收货人联系电话" type="number" v-model="phone" /></view>
				</view>
			</view>
			<view class="address-cont-title b-f b-b">
				<view class="dis-flex list address-box m-top20 b-b">
					<view class="left-name"><text class="f-30">所在地区</text></view>
					<view class="address-cont-box flex-box">
						<picker mode="multiSelector" :value="regionValue" :range="regionRange" @change="regionPickerChange" @columnchange="regionPickerColChange">
							<text v-if="region" class="f-30">{{ region }}</text>
							<text v-else class="f-30 col-7">选择省、市、区</text>
						</picker>
					</view>
				</view>
				<view class="list address-box dis-flex">
					<view class="left-name"><text class="f-30">详细地址</text></view>
					<view class="right-cont flex-box"><input name="detail" placeholder="请输入街道小区楼层" type="text" v-model="detail" /></view>
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="padding-box m-top35 btn-green btn-sm"><button class="f-32" @tap="chooseAddress">一键获取微信地址</button></view>
			<view class="padding-box m-top20 profile-btn"><button formType="submit" :disabled="disabled">保存</button></view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view v-if="isWechat && jssdkReady" class="padding-box m-top35 btn-green btn-sm"><button class="f-32" @tap="chooseAddressInWechat">一键获取微信地址</button></view>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="padding-box m-top35 profile-btn"><button formType="submit" :disabled="disabled">保存</button></view>
			<!-- #endif -->
		</form>
		<shortcut></shortcut>
	</view>
</template>

<script>
import shortcut from '@/components/shortcut/shortcut.vue';
import Tools from '@/utils/Tools.js';
import Route from '@/utils/Route.js';
import regionData from '@/json/regionData.js';
export default {
	components: {
		shortcut
	},
	data() {
		return {
			name: '',
			region: '',
			phone: '',
			cityPickerStatus: false,
			detail: '',
			disabled: false,
			error: '',
			regionValue: [0, 0, 0],
			regionRange: [[], [], []],
			isWechat: false,
			jssdkReady: false
		};
	},
	onLoad() {
		const regionPickerData = Tools.regionHandle(regionData.data);
		this.regionValue = regionPickerData.regionValue;
		this.regionRange = regionPickerData.regionRange;
		if (Tools.isWechat()) {
			this.isWechat = true;
			this.$wechat.initJssdk(() => {
				this.jssdkReady = true;
			});
		}
	},
	methods: {
		/**
		 * 表单提交
		 */
		saveData(e) {
			let values = e.detail.value;
			values.region = this.region;
			// 表单验证
			if (!this.validation(values)) {
				Tools.showError(this.error);
				return false;
			}
			this.disabled = true;
			// 提交到后端
			this.$post(
				this.$api.addAddress,
				values,
				res => {
					Tools.showSuccess(res.msg, function() {
						Route.navigateBack();
					});
				},
				false,
				() => {
					// 解除禁用
					this.disabled = false;
				}
			);
		},
		validation(values) {
			if (values.name === '') {
				this.error = '收件人不能为空';
				return false;
			}
			if (values.phone.length < 1) {
				this.error = '手机号不能为空';
				return false;
			}
			let reg = /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/;
			if (!reg.test(values.phone)) {
				this.error = '手机号不符合要求';
				return false;
			}
			if (!this.region) {
				this.error = '省市区不能空';
				return false;
			}
			if (values.detail === '') {
				this.error = '详细地址不能为空';
				return false;
			}
			return true;
		},
		showCityPicker() {
			// #ifdef H5
			this.$refs.mpvueCityPicker.show();
			// #endif
			// this.cityPickerStatus = !this.cityPickerStatus;
		},
		regionPickerChange(e) {
			const value = e.detail.value;
			this.region = regionData.data[value[0]].label + ',' + regionData.data[value[0]].children[value[1]].label + ',' + regionData.data[value[0]].children[value[1]].children[value[2]].label;
		},
		regionPickerColChange(e) {
			const column = e.detail.column;
			const value = e.detail.value;
			const regionValue = this.regionValue;
			regionValue[column] = value;
			const regionPickerData = Tools.regionHandle(regionData.data, regionValue[0], regionValue[1], regionValue[2]);
			this.regionValue = regionPickerData.regionValue;
			this.regionRange = regionPickerData.regionRange;
		},
		chooseAddress() {
			uni.chooseAddress({
				success: res => {
					this.name = res.userName;
					this.phone = res.telNumber;
					this.region = [res.provinceName, res.cityName, res.countryName].join(',');
					this.detail = res.detailInfo;
				}
			});
		},
		chooseAddressInWechat() {
			// #ifdef H5
			this.$wechat.openAddress({
				success: res => {
					this.name = res.userName;
					this.phone = res.telNumber;
					this.region = [res.provinceName, res.cityName, res.countryName].join(',');
					this.detail = res.detailInfo;
				},
				fail: e => {
					console.log(e);
				}
			});
			// #endif
		}
	}
};
</script>

<style lang="scss">
.container {
	width: 750rpx;
	overflow: hidden;
}
.profile-list {
	.admin {
		padding-left: 15px;
		font-size: 30rpx;
		color: #333;
	}
}
.address-box {
	.left-name {
		width: 85px;
	}
	.right-cont {
		input {
			height: 52rpx;
			width: 100%;
			font-size: 30rpx;
			color: #444;
		}
	}
}
.address-cont-title {
	.list {
		width: auto;
		padding: 24rpx;
	}
}

.m-top10 {
	margin-top: 10rpx;
}

.m-top20 {
	margin-top: 25rpx;
}

.m-top35 {
	margin-top: 35rpx;
}
</style>
